<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN" class="translated-ltr">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">
    <script th:src="@{/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/js/sgl-app.js}"></script>
    <link rel="stylesheet" th:href="@{/plugins/mui/css/mui.min.css}">
    <script th:src="@{/plugins/mui/js/mui.min.js}"></script>
    <script th:src="@{/plugins/zepto/zepto.min.js}"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #file-container {
            margin-top: 5px;
            width: 100%;
            height: 220px;
            background-size: cover;
            padding: 10px 10px;
            overflow: hidden;
        }

        .item-div {
            height: 80px;
            width: 60px;
            /*background-image: url(@{/img/iconfont-tianjia.jpg});*/
            background-size: 100% 100%;
            display: inline-block;
            position: relative;
            margin-bottom: 10px;
            margin-right: 10px;
            border: none;
            border-radius: 5px;
        }

        .item-div span {
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 3px;
            background-color: red;
            color: white;
            right: 0;
            top: 0;
            text-align: center;
            line-height: 15px;
            display: none;
        }

        input {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 0;
        }

        .box {
            width: 100%;
            height: 40px;
            border: 1px solid #FFF;
            display: table;
            margin-right: 5px;
        }

        .wrap {
            display: table-cell;
            vertical-align: top;
            width: 100%;
            padding: 6px 0px;
            line-height: 26px;
            word-wrap: break-word;
            word-break: break-all;
        }

        .mui-input-row .div-leftauto {
            width: 110px;
            display: inline-block;
            vertical-align: top;
            margin-left: 5px;
            padding: 6px 0px;
            line-height: 26px;
        }

        .mui-input-row.multi-line {
            height: auto;
        }

        #btn_save {
            position: relative;
            display: block;
            width: 80px;
            height: 40px;
            margin-left: auto;
            margin-right: auto;
            padding: 3px 14px;
            vertical-align: center;
            box-sizing: border-box;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            line-height: 18px;
            border-radius: 5px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            overflow: hidden;
            background-color: #179b16;
            margin-bottom: 10px;
        }


        .weui-tabbar {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            position: absolute;
            z-index: 500;
            bottom: 0;
            width: 100%;
            background-color: #f7f7fa
        }

        .weui-tabbar:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #c0bfc4;
            color: #c0bfc4;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5)
        }

        .weui-tabbar__item {
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            padding: 5px 0 0;
            font-size: 0;
            color: #999999;
            text-align: center;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
        .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
        .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
            color: #09BB07;
        }

        .weui-tabbar__icon {
            display: inline-block;
            width: 27px;
            height: 27px
        }

        .weui-tabbar__icon > i, i.weui-tabbar__icon {
            font-size: 24px;
            color: #999
        }

        .weui-tabbar__icon img {
            width: 100%;
            height: 100%
        }

        .weui-tabbar__label {
            text-align: center;
            color: #999;
            font-size: 10px;
            line-height: 1.8
        }
    </style>
</head>


<body>
<div class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header">
        <div class="mui-input-row multi-line">
            <div class="box label-right">
                <div class="div-leftauto">生产令号</div>
                <div class="wrap" th:text="${tran.prodNo}"></div>
            </div>
            <div class="box label-right">
                <div class="div-leftauto">图号</div>
                <div class="wrap" th:text="${tran.drawNo}"></div>
            </div>
            <div class="box label-right">
                <div class="div-leftauto">零件名称</div>
                <div class="wrap" th:text="${tran.drawName}"></div>
            </div>
            <div class="box label-right">
                <div class="div-leftauto">零件数量</div>
                <div class="wrap" th:text="${tran.drawNum}"></div>
            </div>
            <div class="box label-right" th:if="${check.result !=null and check.result == '质检不合格'}">
                <div class="div-leftauto">质检意见</div>
                <div class="wrap">
                    <textarea id="reason"
                              name="reason"
                              th:text="${check.reason}"
                              maxlength="255"
                              rows="5"
                              style="overflow-y:visible;">

                    </textarea>
                    <span style="color: red;
                                 font-weight: bold"
                          id="lengthPrompt">

                    </span>
                </div>
            </div>
            <!--            <div class="box label-right">-->
            <!--                <div class="div-leftauto">    </div>-->
            <!--                <div  class="wrap"></div>-->
            <!--            </div>-->
        </div>
    </div>
    <!--内容区-->
    <div class="mui-card-content">
        <div id="load_div" class="box label-right" style="font-size: 18px">
            附件加载中请稍后...
        </div>
        <div id="file-container" style="overflow: hidden;overflow-y: visible;display: none">
            <div class="item-div" th:style="|background-image:url(@{/img/iconfont-tianjia.jpg});|">
                <span style="font-size:50px">x</span>
                <input id="file"
                       type="file"
                       accept="image/*"
                       onchange="changeImage(this)"
                       capture="camera"
                       multiple="multiple"/>
            </div>
        </div>
        <div style="text-align: center">
            <button id="btn_save" style="display: none">保存
            </button>
        </div>
    </div>
    <!--    &lt;!&ndash;页脚，放置补充信息或支持的操作&ndash;&gt;-->
    <!--    <div class="mui-card-footer">页脚</div>-->

</div>

<div class="weui-tabbar">
    <a th:href="@{/index}" class="weui-tabbar__item weui-bar__item--on">
        <div class="weui-tabbar__icon">
            <img th:src="@{/img/me.png}" alt="">
        </div>
        <p class="weui-tabbar__label">我的信息</p>
    </a>

    <!--生产历史-->
    <a th:if="${#strings.contains(session.user.roles,'【申请质检】')}" th:href="@{/hisApply/null/null}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img th:src="@{/img/his_apply.png}" alt="">
        </div>
        <p class="weui-tabbar__label">历史申请</p>
    </a>
    <a th:if="${#strings.contains(session.user.roles,'【转序接收】')}" th:href="@{/hisRec/null/null}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img th:src="@{/img/his_rec.png}" alt="">
        </div>
        <p class="weui-tabbar__label">历史接收</p>
    </a>
    <a th:if="${#strings.contains(session.user.roles,'【转序质检】')}" th:href="@{/hisCheck/null/null}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img th:src="@{/img/his_check.png}" alt="">
        </div>
        <p class="weui-tabbar__label">历史质检</p>
    </a>
    <a th:if="${#strings.contains(session.user.roles,'【入库质检】')}" onclick="tips()" href="javascript:void(0)"
       class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img th:src="@{/img/his_check.png}" alt="">
        </div>
        <p class="weui-tabbar__label">入库历史质检</p>
    </a>
</div>
<a id="jumpPage" style="display: none" th:href="@{/index}"/>
<img id="conduit" style="display: none"/>
<script>
    let checkId = [[${check.id}]];
    let result = '[[${check.result}]]';
    let attList = undefined;
    let count = 0;
    let imgName = "";
    let isActivationRemoveImg = false;
    const formData = new FormData();
    formData.append("checkId", checkId);

    //上传的文件数组
    let uploadFiles = [];
    //删除的文件名数组
    let removeUploadFileNames = [];

    /**
     * 改变图片时
     */
    function changeImage(ev) {
        for (let i = 0; i < uploadFiles.length; i++) {
            if (uploadFiles[i].name == ev.files[0].name) {
                alert("不可重复添加相同的图片！");
                return;
            }
        }
        let file = ev.files[0];
        imgName = file.name;
        uploadFiles.push(file);
        //图片转base64
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = function () {
            if (count >= 30) {
                alert("最多30张");
                count = 30;
                return;
            }
            //获取base64的图片
            let result = this.result;
            //动态创建元素设置图片背景
            let divImage = $("<div id='" + imgName + "'></div>");
            divImage.addClass("item-div");
            divImage.addClass("item-img");
            // alert(result)
            divImage.css("background-image", "url(" + result + ")");
            let spanImage = $("<span class='btn_remove' img-id='img_" + imgName + "' style='font-size:15px;z-index: 10000'>x</span>");
            spanImage.css("display", "inline-block");
            divImage.append(spanImage);
            $("#file-container").append(divImage);
            count++;
            //如果上传了三张就隐藏上传按钮
            if (count === 30) {
                $("#file-container").children(".item-div:last-child").css("display", "none");
            }
        };
        //多次响应onchange,不然只会执行一次
        $(ev).val("")
    }

    /**
     * 全屏
     */
    function ImgZoomIn(obj) {
        let window_h = $(window).height();
        let window_w = $(window).width();
        let scroll_h = $(window).scrollTop();
        let bgstr = '<div id="ImgZoomInBG" style="position: absolute;filter:Alpha(Opacity=70); opacity:0.7;z-index: 10001;background-color: #000;display: none;"></div>';
        let imgstr = '<img id="ImgZoomInImage" src="' + $(obj).css('backgroundImage').substring(5) + '" style="cursor:pointer; display:none; position:absolute; z-index:10002;" />';
        if ($('#ImgZoomInBG').length < 1) {
            $('body').append(bgstr);
        }
        if ($('#ImgZoomInImage').length < 1) {
            $('body').append(imgstr);
        } else {
            $('#ImgZoomInImage').remove();
            $('body').append(imgstr);
        }
        $('#ImgZoomInBG').css('top', scroll_h + 'px');
        $('#ImgZoomInBG').css('width', '100%');
        $('#ImgZoomInBG').css('height', window_h + 'px');
        $('#ImgZoomInImage').css('width', '100%');
        $('#ImgZoomInImage').css('height', (window_w / 3 * 4) + 'px');
        $('#ImgZoomInImage').css('top', (scroll_h + (window_h - (window_w / 3 * 4)) / 2) + 'px');
        $('#ImgZoomInBG').show();
        $('#ImgZoomInImage').show();
    };

    /**
     * 长度验证并提示
     */
    function lengthPromptFun(obj) {
        let totalLength = 255;
        let reasonLength = obj.value.length;
        if (reasonLength > totalLength) {
            $(obj).val(reasonLength.substr(0, 255));
        }
        let remainderLength = totalLength - reasonLength;
        if (remainderLength <= 10) {
            document.getElementById("lengthPrompt").innerHTML = "质检意见还剩" + remainderLength + "个字符可以输入。";
        } else {
            document.getElementById("lengthPrompt").innerHTML = "";
        }
    }

    /**
     * URL转Base64
     */
    function getBase64(url, callback) {
        var Img = new Image(),
            dataURL = '';
        Img.src = url + '?v=' + Math.random();
        Img.setAttribute('crossOrigin', 'Anonymous');
        Img.onload = function () {
            var canvas = document.createElement('canvas'),
                width = Img.width,
                height = Img.height;
            canvas.width = width;
            canvas.height = height;
            canvas.getContext('2d').drawImage(Img, 0, 0, width, height);
            dataURL = canvas.toDataURL('image/jpeg');
            return callback ? callback(dataURL) : null;
        };
    }

    /**
     * base64转blob
     */
    const base64ToBlob = function (base64Data) {
        let arr = base64Data.split(','),
            fileType = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            l = bstr.length,
            u8Arr = new Uint8Array(l);

        while (l--) {
            u8Arr[l] = bstr.charCodeAt(l);
        }
        return new Blob([u8Arr], {
            type: fileType
        });
    };
    /**
     * blob转file
     */
    const blobToFile = function (newBlob, fileName) {
        newBlob.lastModifiedDate = new Date();
        newBlob.name = fileName;
        return newBlob;
    };

    /**
     * 加载附件
     */
    function loadCheckAttachments() {
        $.operate.post({
                url: '/loadCheckAttachments',
                data: {
                    checkId: checkId
                },
                async: false,
                fun: function (result) {
                    attList = result.data.rows;
                    if (attList.length > 0) {
                        let lastDataUrl = null;
                        for (let i = 0; i < attList.length; i++) {
                            getBase64(attList[i].attUrl, dataUrl => {
                                let htmlStr = '<div id="' + attList[i].attFileName + '" ' +
                                    'class="item-div item-img" ' +
                                    'style="background-image: url(' + dataUrl + ')">' +
                                    '<span class="btn_remove" img-id="img_' + attList[i].attFileName + '" ' +
                                    'style="font-size: 15px; ' +
                                    'z-index: 10000; ' +
                                    'display: inline-block;">' +
                                    'x' +
                                    '</span>' +
                                    '</div>';
                                $("#file-container").append(htmlStr);
                                //压入文件流
                                uploadFiles.push(blobToFile(base64ToBlob(dataUrl), attList[i].attFileName));
                                lastDataUrl = dataUrl;
                                count++;
                                let tempImg = new Image();
                                tempImg.src = lastDataUrl;
                                tempImg.onload = function () {
                                    $("#load_div").hide();
                                    $("#btn_save").show();
                                    $("#file-container").show();
                                    tempImg.remove();
                                };
                            });
                        }
                    } else {
                        $("#load_div").hide();
                        $("#btn_save").show();
                        $("#file-container").show();
                    }
                }
            }
        );
    }

    $(function () {
        /**
         * 当手机点触删除图片时
         */
        $(document).on('touchend', '.btn_remove', function () {
            isActivationRemoveImg = true;
            let imgNameVal = $(this).attr("img-id").substring(4);
            removeUploadFileNames.push(imgNameVal);
            let uploadNewFiles = [];
            for (let i = 0; i < uploadFiles.length; i++) {
                if (uploadFiles[i].name != imgNameVal) {
                    uploadNewFiles.push(uploadFiles[i]);
                }
            }
            uploadFiles = uploadNewFiles;
            $(this).parent().remove();
            //计数减减
            count--;
            //上传按钮显示
            $("#file-container").children(".item-div:last-child").css("display", "inline-block");
        });

        /**
         * 当手机点触图片时
         */
        $(document).on('touchend', '.item-img', function (t) {
            let isRemove = false;
            for (let i = 0; i < removeUploadFileNames.length; i++) {
                if (removeUploadFileNames[i] == $(this).attr("id")) {
                    isRemove = true;
                    break
                }
            }
            if (isRemove === false) {
                ImgZoomIn(this);
                document.ontouchstart = function () {
                    return false;
                }
                t.preventDefault();
            }
        });
        /**
         * 当手机点触放大的图片时
         */
        $(document).on('touchend', '#ImgZoomInImage', function (t) {
            $('#ImgZoomInImage').hide();
            $('#ImgZoomInBG').hide();
            document.ontouchstart = function () {
                return true;
            }
            t.preventDefault();
        });

        /**
         * 加载附件
         */
        loadCheckAttachments();
        /**
         * 当键盘抬起时验证字数（阻拦输入）
         */
        $("#reason").keyup(function () {
            lengthPromptFun(this)
        });
        /**
         * 当内容改变时时验证字数（阻拦复制粘贴）
         */
        $("#reason").change(function () {
            lengthPromptFun(this)
        });
        /**
         * 保存
         */
        $("#btn_save").on('click', function () {
            formData.append("reason", $("#reason").val());
            if (uploadFiles.length > 0) {
                for (let i = 0; i < uploadFiles.length; i++) {
                    formData.append("files", uploadFiles[i]);
                }
            } else {
                let emptyFiles = [];
                formData.append("files", emptyFiles);
            }
            if (removeUploadFileNames.length > 0) {
                for (let i = 0; i < removeUploadFileNames.length; i++) {
                    formData.append("removeFiles", removeUploadFileNames[i]);
                }
            } else {
                let emptyFiles = [];
                formData.append("removeFiles", emptyFiles);
            }
            $.operate.submit({
                url: '/saveCheckOrders',
                data: formData,
                fun: function (res) {
                    document.getElementById("jumpPage").click();//模拟点击
                }
            });
        });
    })
</script>
</body>

</html>